<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>通过canvas绘制网格</title>
</head>
<body>
    <canvas id="oCanvas" width="500" height="500" style="border:1px solid black"></canvas>
</body>
<script>
    //1.获取canvas对象
    var canvas = document.getElementById("oCanvas");
    //2.通过canvas对象获取画笔对象
    var ctx = canvas.getContext('2d');
    drawLine(10,10);

    function drawLine(x,y){
        for(var i=x;i<ctx.canvas.width;i=i+x){
            //绘制竖
            //3.开始一个路径
            ctx.beginPath();
            //4.设置起始点
            ctx.moveTo(i,0);
            ctx.strokeStyle ='black';
            ctx.lineWidth=0.5;
            //5.连线
            ctx.lineTo(i,ctx.canvas.height);
            //6.描边
            ctx.stroke();
        }
        for(var i=y;i<ctx.canvas.width;i=i+y){
            //绘制横
            //3.开始一个路径
            ctx.beginPath();
            //4.设置起始点
            ctx.moveTo(0,i);
            ctx.strokeStyle ='black';
            //5.连线
            ctx.lineTo(ctx.canvas.width,i);
            //6.描边
            ctx.stroke();
        }
    }
</script>
</html>